<script setup>
import { ref, onMounted } from 'vue'
import { Edit, Delete, Plus } from '@element-plus/icons-vue'
onMounted(() => {
    getBike()
})

const getBike = async () => {
    //初始化
    let first = function (callback) {
        var c1 = new cloud.Cloud({
            //必填，表示是未登录模式
            identityless: true,
            //资源方 AppID
            resourceAppid: 'wx026afb68a8e326e4',
            //资源方环境 ID
            resourceEnv: 'djcx-ak88-3gjvcbn22ca54f8e',
        })
        c1.init()
        //回调
        callback(c1)
    };
    //完成初始化后再回调，即可访问云数据库
    let callback = function (c1) {
        // 我个人不喜欢写云函数，所以直接写在Web这里做操作
        // 你要访问的各种操作写在这个callback函数里即可，这里以查询users表为例
        const db = c1.database();
        db.collection('ebikesites').get({
            success: res => {
                console.log(res.data)
                tableData.value = res.data
                // console.log(tableData.value)
            },
            fail: res => {
                console.log(res);
            }
        })
    };
    first(callback);
}

const tableData = ref([])

const formInline = ref({
    address: '',
})

const search = () => {
    tableData.value = tableData.value.filter(item =>
        item.address === formInline.value.address
    )
}

const dialogFormVisible = ref(false)
const dialogFormVisible2 = ref(false)
const dialogFormVisible3 = ref(false)
const dialogFormVisible4 = ref(false)
const editMessage = (row) => {
    console.log(row)
    dialogFormVisible.value = true
    form.value = row
}

const form = ref({
    _id: '',
    name: '',
    address: '',
    distance: '',
    lat: '',
    lng: '',
    ebike: ''
})

const indexs = ref(0)
const prop = ref({})

const editMessage2 = (row, $index, props) => {
    console.log(row)
    dialogFormVisible2.value = true
    form2.value = row
    indexs.value = $index
    prop.value = props
}

const form2 = ref({
    name: '',
    rent: '',
    valid: '',
    vid: '',
    yajin: '',
    fenqi_month: '',
    fenqi_rent: ''
})

const check = () => {
    console.log(form.value)
    //初始化
    var c1 = new cloud.Cloud({
        //必填，表示是未登录模式
        identityless: true,
        //资源方 AppID
        resourceAppid: 'wx026afb68a8e326e4',
        //资源方环境 ID
        resourceEnv: 'djcx-ak88-3gjvcbn22ca54f8e',
    })
    c1.init({
        env: "djcx-ak88-3gjvcbn22ca54f8e"
    })

    c1.callFunction({
        name: 'editDizhi',
        data: {
            id: form.value._id,
            name: form.value.name,
            address: form.value.address,
            distance: form.value.distance,
            lat: form.value.lat,
            lng: form.value.lng
        },
        success: res => {
            console.log(res);
            getBike()
        },
        fail: res => {
            console.log(res);
        }
    })
    dialogFormVisible.value = false
}

const check2 = () => {
    console.log(indexs.value, prop.value)
    prop.value.ebike[indexs] = form2.value
    //初始化
    var c1 = new cloud.Cloud({
        //必填，表示是未登录模式
        identityless: true,
        //资源方 AppID
        resourceAppid: 'wx026afb68a8e326e4',
        //资源方环境 ID
        resourceEnv: 'djcx-ak88-3gjvcbn22ca54f8e',
    })
    c1.init({
        env: "djcx-ak88-3gjvcbn22ca54f8e"
    })

    c1.callFunction({
        name: 'editBike',
        data: {
            id: prop.value._id,
            ebike: prop.value.ebike
        },
        success: res => {
            console.log(res);
            getBike()
        },
        fail: res => {
            console.log(res);
        }
    })
    dialogFormVisible2.value = false
}


const del = (row) => {
    console.log(row._id)
    //初始化
    var c1 = new cloud.Cloud({
        //必填，表示是未登录模式
        identityless: true,
        //资源方 AppID
        resourceAppid: 'wx026afb68a8e326e4',
        //资源方环境 ID
        resourceEnv: 'djcx-ak88-3gjvcbn22ca54f8e',
    })
    c1.init({
        env: "djcx-ak88-3gjvcbn22ca54f8e"
    })

    c1.callFunction({
        name: 'delBattery',
        data: {
            name: 'ebikesites',
            id: row._id
        },
        success: res => {
            console.log(res);
            getBike()
        },
        fail: res => {
            console.log(res);
        }
    })
}

const del2 = ($index, props) => {

    // console.log($index, props.ebike)
    props.ebike.splice($index, 1)
    // console.log(props.ebike)
    //初始化
    var c1 = new cloud.Cloud({
        //必填，表示是未登录模式
        identityless: true,
        //资源方 AppID
        resourceAppid: 'wx026afb68a8e326e4',
        //资源方环境 ID
        resourceEnv: 'djcx-ak88-3gjvcbn22ca54f8e',
    })
    c1.init({
        env: "djcx-ak88-3gjvcbn22ca54f8e"
    })

    c1.callFunction({
        name: 'editBike',
        data: {
            id: props._id,
            ebike: props.ebike
        },
        success: res => {
            console.log(res);
            getBike()
        },
        fail: res => {
            console.log(res);
        }
    })
}

const resize = () => {
    formInline.value = {
        address: '',
    }
    getBike()
}

const add = () => {
    dialogFormVisible3.value = true
}

const adds = () => {
    console.log(form.value)
    //初始化
    var c1 = new cloud.Cloud({
        //必填，表示是未登录模式
        identityless: true,
        //资源方 AppID
        resourceAppid: 'wx026afb68a8e326e4',
        //资源方环境 ID
        resourceEnv: 'djcx-ak88-3gjvcbn22ca54f8e',
    })
    c1.init({
        env: "djcx-ak88-3gjvcbn22ca54f8e"
    })

    c1.callFunction({
        name: 'addDizhi',
        data: {
            id: form.value._id,
            name: form.value.name,
            address: form.value.address,
            distance: form.value.distance,
            lat: form.value.lat,
            lng: form.value.lng,
            ebike: [{
                fenqi_month: 5,
                fenqi_rent: 5,
                rent: 555,
                name: "爱玛",
                valid: 2,
                vid: 2,
                yajin: 2
            }]
        },
        success: res => {
            console.log(res);
            getBike()
        },
        fail: res => {
            console.log(res);
        }
    })
    dialogFormVisible3.value = false
}

const rows = ref({})
const editMessage3 = (row) => {
    dialogFormVisible4.value = true
    rows.value = row
}

const addss = () => {
    rows.value.ebike.push(form2.value)
    var c1 = new cloud.Cloud({
        //必填，表示是未登录模式
        identityless: true,
        //资源方 AppID
        resourceAppid: 'wx026afb68a8e326e4',
        //资源方环境 ID
        resourceEnv: 'djcx-ak88-3gjvcbn22ca54f8e',
    })
    c1.init({
        env: "djcx-ak88-3gjvcbn22ca54f8e"
    })

    c1.callFunction({
        name: 'editBike',
        data: {
            id: rows.value._id,
            ebike: rows.value.ebike
        },
        success: res => {
            console.log(res);
            getBike()
        },
        fail: res => {
            console.log(res);
        }
    })
    dialogFormVisible4.value = false
}
</script>

<template>
    <el-form :inline="true" :model="formInline" class="form">

        <el-form-item label="地址">
            <el-input class="input" v-model="formInline.address" placeholder="地址" />
        </el-form-item>

        <el-button type="info" class="button" @click="resize">重置</el-button>
        <el-button type="primary" class="button" @click="search">查询</el-button>
    </el-form>
    <el-table :data="tableData" class="list" style="width: 100%">
        <el-table-column type="expand">
            <template #default="props">
                <div class="mid">
                    <h3>车辆信息</h3>
                    <el-table :data="props.row.ebike">
                        <el-table-column type=index label="序号" width="120" />
                        <el-table-column prop="name" label="名称" width="120" />
                        <el-table-column prop="vid" label="编号" width="150" />
                        <el-table-column prop="yajin" label="押金" width="120" />
                        <el-table-column prop="rent" label="价格" width="120" />
                        <el-table-column prop="valid" label="有效期" width="120" />
                        <el-table-column prop="fenqi_month" label="分期月份" width="120" />
                        <el-table-column prop="fenqi_rent" label="分期价格" width="120" />
                        <el-table-column prop="edit" label="操作" width="180">
                            <template #default="{ row, $index }">
                                <el-button type="primary" :icon="Edit" circle
                                    @click="editMessage2(row, $index, props.row)" />
                                <el-button type="danger" :icon="Delete" circle @click="del2($index, props.row)" />
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </template>
        </el-table-column>
        <el-table-column type=index label="序号" width="60" />
        <el-table-column prop="name" label="名称" width="120" />
        <el-table-column prop="address" label="地址" width="300" />
        <el-table-column prop="distance" label="距离" width="120" />
        <el-table-column prop="lat" label="纬度" width="120" />
        <el-table-column prop="lng" label="经度" width="120" />
        <!-- <el-table-column prop="ebike[0].name" label="车辆类型" width="120" /> -->
        <el-table-column prop="edit" label="操作" width="180">
            <template #default="{ row }">
                <el-button type="primary" :icon="Edit" circle @click="editMessage(row)" />
                <el-button type="danger" :icon="Delete" circle @click="del(row)" />
                <el-button type="success" :icon="Plus" circle @click="editMessage3(row)" />
            </template>
        </el-table-column>
    </el-table>
    <div class="footer">
        <div class="page-num">共{{ tableData.length }}条</div>
        <el-button type="primary" class="footerBtn" @click="add">增加</el-button>
    </div>
    <el-dialog v-model="dialogFormVisible" title="修改地点信息">
        <el-form :model="form">
            <el-form-item label="名称" label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="地址" label-width="formLabelWidth">
                <el-input v-model="form.address" autocomplete="off" />
            </el-form-item>
            <el-form-item label="距离" label-width="formLabelWidth">
                <el-input v-model="form.distance" autocomplete="off" />
            </el-form-item>
            <el-form-item label="纬度" label-width="formLabelWidth">
                <el-input v-model="form.lat" autocomplete="off" />
            </el-form-item>
            <el-form-item label="经度" label-width="formLabelWidth">
                <el-input v-model="form.lng" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="check">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>

    <el-dialog v-model="dialogFormVisible2" title="修改车辆信息">
        <el-form :model="form2">
            <el-form-item label="名称" label-width="formLabelWidth">
                <el-input v-model="form2.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="价格" label-width="formLabelWidth">
                <el-input v-model="form2.rent" autocomplete="off" />
            </el-form-item>
            <el-form-item label="有效期" label-width="formLabelWidth">
                <el-input v-model="form2.valid" autocomplete="off" />
            </el-form-item>
            <el-form-item label="vid" label-width="formLabelWidth">
                <el-input v-model="form2.vid" autocomplete="off" />
            </el-form-item>
            <el-form-item label="押金" label-width="formLabelWidth">
                <el-input v-model="form2.yajin" autocomplete="off" />
            </el-form-item>
            <el-form-item label="分期月份" label-width="formLabelWidth">
                <el-input v-model="form2.fenqi_month" autocomplete="off" />
            </el-form-item>
            <el-form-item label="分期价格" label-width="formLabelWidth">
                <el-input v-model="form2.fenqi_rent" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取消</el-button>
                <el-button type="primary" @click="check2">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>

    <el-dialog v-model="dialogFormVisible3" title="新增地点信息">
        <el-form :model="form">
            <el-form-item label="名称" label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="地址" label-width="formLabelWidth">
                <el-input v-model="form.address" autocomplete="off" />
            </el-form-item>
            <el-form-item label="距离" label-width="formLabelWidth">
                <el-input v-model="form.distance" autocomplete="off" />
            </el-form-item>
            <el-form-item label="纬度" label-width="formLabelWidth">
                <el-input v-model="form.lat" autocomplete="off" />
            </el-form-item>
            <el-form-item label="经度" label-width="formLabelWidth">
                <el-input v-model="form.lng" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible3 = false">取消</el-button>
                <el-button type="primary" @click="adds">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>

    <el-dialog v-model="dialogFormVisible4" title="修改车辆信息">
        <el-form :model="form2">
            <el-form-item label="名称" label-width="formLabelWidth">
                <el-input v-model="form2.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="价格" label-width="formLabelWidth">
                <el-input v-model="form2.rent" autocomplete="off" />
            </el-form-item>
            <el-form-item label="有效期" label-width="formLabelWidth">
                <el-input v-model="form2.valid" autocomplete="off" />
            </el-form-item>
            <el-form-item label="vid" label-width="formLabelWidth">
                <el-input v-model="form2.vid" autocomplete="off" />
            </el-form-item>
            <el-form-item label="押金" label-width="formLabelWidth">
                <el-input v-model="form2.yajin" autocomplete="off" />
            </el-form-item>
            <el-form-item label="分期月份" label-width="formLabelWidth">
                <el-input v-model="form2.fenqi_month" autocomplete="off" />
            </el-form-item>
            <el-form-item label="分期价格" label-width="formLabelWidth">
                <el-input v-model="form2.fenqi_rent" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取消</el-button>
                <el-button type="primary" @click="addss">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style scoped>
.mid {
    margin-left: 10px;
}

.form {
    padding: 20px;

    .button {
        margin-bottom: 18px;
    }
}

.list {
    height: 72vh;
    margin-bottom: 5px;
}

.footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 30px;

    .footerBtn {
        margin-right: 60px;
    }

    .page {
        margin-right: 120px;
    }

    .page-num {
        margin-left: 30px;
    }
}
</style>